<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="max-age=604800" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="Bootstrap-ecommerce by Vosidiy">

    <title>酒店详情</title>

    <link href="/images/favicon.ico" rel="shortcut icon" type="image/x-icon">

    <!-- jQuery -->
    <script src="/js/jquery-2.0.0.min.js" type="text/javascript"></script>

    <!-- Bootstrap4 files-->
    <script src="/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- Font awesome 5 -->
    <link href="/fonts/fontawesome/css/fontawesome-all.min.css" type="text/css" rel="stylesheet">

    <!-- custom style -->
    <link href="/css/ui.css" rel="stylesheet" type="text/css"/>
    <link href="/css/responsive.css" rel="stylesheet" media="only screen and (max-width: 1200px)" />

    <!-- custom javascript -->
    <script src="/js/script.js" type="text/javascript"></script>

    <script type="text/javascript">
        /// some script

        // jquery ready start
        $(document).ready(function() {
            // jQuery code

        });
        // jquery end
    </script>

</head>
<body>
<header class="section-header">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <form action="/HTML/userInfo" method="post" name="showUserInfoForm" >
            <a class="navbar-brand" href="javascript:history.go(-1)" name="savesubmit" id="savesubmit"> <img class="logo" src="/images/logo-white.png" th:text="'  '+'欢迎您'"></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
        </form>

        <div class="collapse navbar-collapse" id="navbar1">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="btn ml-2 btn-outline-danger" href="/HTML/relogin">退出登录<span class="sr-only">(current)</span></a>
                </li>
                <li class="new-item">
                    <a class="btn ml-2 btn-outline-success" href="/HTML/home">返回主页</a>
                </li>
                <form action="/HTML/lookOrderList" method="post" name="showUserOrderForm" th:value="${account}">
                    <li class="nav-item">
                        <a class="btn ml-2 btn-outline-primary" href="javascript:showUserOrderForm.submit();">我的订单<span class="sr-only">(current)</span></a>
                    </li>
                </form>
                <li class="nav-item">
                    <a class="btn ml-2 btn-outline-warning" href="javascript:showUserInfoForm.submit();">个人资料</a>
                </li>
            </ul>
        </div>
    </nav>
</header> <!-- section-header.// -->

<!-- ========================= SECTION PAGETOP ========================= -->
<section class="section-pagetop bg-secondary">
    <div class="container clearfix">
        <h2 class="title-page"  align="center" style="font-family:'微软雅黑 Light';font-size:51px;" th:text="${hotel.hotelTranslatedName}"></h2>
        <h5 class="title-page "  align="center" style="font-family:'微软雅黑 Light';font-size:22px" th:text="'—— '+${hotel.hotelName}+' ——'"></h5>
        <!--标题下面的内容：两个按钮-->
        <!--<nav class="float-center">-->
        <!--<ol class="breadcrumb text-white">-->
        <!--<li class="breadcrumb-item"><a href="#">Home</a></li>-->
        <!--<li class="breadcrumb-item"><a href="#">Library</a></li>-->
        <!--<li class="breadcrumb-item active" aria-current="page">Data</li>-->
        <!--</ol>-->
        <!--</nav>-->
    </div> <!-- container //  -->
</section>
<!-- ========================= SECTION INTRO END// ========================= -->

<!-- ========================= SECTION CONTENT ========================= -->
<section class="section-content bg padding-y">
    <div class="container">

        <div class="row">
            <main class="col-sm-9">

                <header class="section-heading">
                    <h2 class="title-section">简介</h2>
                </header><!-- sect-heading -->

                <article>
                    <p th:text="'    '+${hotel.overview}" style="font-family:'微软雅黑 Light';font-size: 19px;"></p>

                    <!--<a href="javascript: history.back()" class="btn btn-primary"> &laquo Go back</a>-->
                    <div>
                        <form action="/HTML/createOrder" method="post" name="createOrder" >
                            <a th:href="${hotel.url}" class="btn btn-outline-primary col-sm-2"> 酒店官网</a>
                            <button type="submit"  class="btn btn-outline-primary col-sm-2">创建订单</button>
                        </form>
                    </div>
                </article>
            </main> <!-- col.// -->
            <aside class="col-sm-3">
                <article class="box" >
                    <h6 class="title"style="font-size:19px;font-family:'微软雅黑'">地址</h6>
                    <h6 th:text="${hotel.continentName}+' · '+${hotel.country}+' · '+${hotel.city}"style="font-family: '微软雅黑 Light'"></h6>
                    <h6 th:text="${hotel.addressline1}"style="font-family: '微软雅黑 Light'"></h6>
                    <div class="row ">
                        <div class="col-sm-6">
                            <h6 class="title"style="font-size:19px;font-family:'微软雅黑'">星级</h6>
                            <h6 th:text="${hotel.starRating}" style="font-family: '微软雅黑 Light'"></h6>
                        </div>
                        <div class="col-sm-6 border-left">
                            <h6 class="title"style="font-size:19px;font-family:'微软雅黑'">评分</h6>
                            <h6 th:text="${hotel.ratingAverage}" style="font-family: '微软雅黑 Light'"></h6>
                        </div>
                    </div>
                    <h6 class="title"style="font-size:19px;font-family:'微软雅黑'">关于住宿</h6>
                    <h6 th:text="'登记住宿时间：'+${hotel.checkin}"style="font-family: '微软雅黑 Light'"></h6>
                    <h6 th:text="'最初退房时间：'+${hotel.checkout}"style="font-family: '微软雅黑 Light'"></h6>
                </article>
            </aside> <!-- col.// -->
        </div>

    </div> <!-- container .//  -->
</section>
<!-- ========================= SECTION CONTENT END// ========================= -->

<!-- ========================= SECTION  ========================= -->
<section class="section-name bg-white padding-y">
    <div class="container">
        <header class="section-heading">
            <h2 class="title-section">图赏</h2>
        </header><!-- sect-heading -->
        <div class="row">
            <img th:src="@{${hotel.photo1}}" class="img-thumbnail col-sm-3">
            <img th:src="@{${hotel.photo2}}" class="img-thumbnail col-sm-3">
            <img th:src="@{${hotel.photo3}}" class="img-thumbnail col-sm-3">
            <img th:src="@{${hotel.photo4}}" class="img-thumbnail col-sm-3">
        </div>
    </div><!-- container // -->
</section>
<!-- ========================= SECTION  END// ========================= -->

<!-- ========================= SECTION  ========================= -->
<section class="section-name bg padding-y">
    <div class="container">
        <h4>Another section if needed</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div><!-- container // -->
</section>
<!-- ========================= SECTION  END// ========================= -->

<!-- ========================= FOOTER ========================= -->
<footer class="section-footer bg-dark white">
    <div class="container">
        <section class="footer-bottom row">
            <div class="col-sm-6">
                <p> 四川大学实训项目 <br>  第六组作品</p>
            </div>
            <div class="col-sm-6">
                <p class="text-sm-right">
                    2019 · 7 · 8 <br>
                    中国 · 成都
                    <!--<a href="http://bootstrap-ecommerce.com">Bootstrap-ecommerce UI kit</a>-->
                </p>
            </div>
        </section> <!-- //footer-top -->
    </div><!-- //container -->
</footer>
<!-- ========================= FOOTER END // ========================= -->


</body>
</html>